function LeaderboardItem({ score, onScoreClick }) {
    const [showInvalidMessage, setShowInvalidMessage] = React.useState(false);
    const timeoutRef = React.useRef(null);
    const [isTransitioning, setIsTransitioning] = React.useState(false);
    
    React.useEffect(() => {
        return () => {
            if (timeoutRef.current) {
                clearTimeout(timeoutRef.current);
            }
        };
    }, []);

    const handleMouseEnter = () => {
        if (timeoutRef.current) {
            clearTimeout(timeoutRef.current);
        }
        setIsTransitioning(true);
        timeoutRef.current = setTimeout(() => {
            setShowInvalidMessage(true);
            setIsTransitioning(false);
        }, 300);
    };

    const handleMouseLeave = () => {
        if (timeoutRef.current) {
            clearTimeout(timeoutRef.current);
        }
        setIsTransitioning(true);
        setShowInvalidMessage(false);
        timeoutRef.current = setTimeout(() => {
            setIsTransitioning(false);
        }, 300);
    };

    const isScoreValid = () => {
        const scoreTimestamp = new Date(score.objectData.timestamp);
        const verificationStartTime = new Date(VERIFICATION_START_TIME);
        const now = new Date();

        // If timestamp is in the future, it's invalid
        if (scoreTimestamp > now) {
            return false;
        }

        // If after verification start time, must have valid verification
        if (scoreTimestamp > verificationStartTime) {
            return score.objectData.verificationToken && score.isVerified;
        }

        // Before verification start time is valid
        return true;
    };

    const isValid = isScoreValid();
    
    return (
        <div>
            {score.showDividerBefore && (
                <div className="h-4 relative my-1">
                    <div className="absolute inset-0 flex items-center">
                        <div className="border-t border-dashed border-gray-300 dark:border-gray-600 w-full"></div>
                    </div>
                </div>
            )}
            <div 
                className={`flex items-center justify-between p-2 ${
                    score.isCurrentPlayer 
                        ? 'bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800' 
                        : 'bg-gray-50 dark:bg-gray-800/50'
                } rounded group relative select-none`}
                data-name="leaderboard-item"
                onMouseEnter={handleMouseEnter}
                onMouseLeave={handleMouseLeave}
            >
                <div className="flex items-center gap-2 min-w-0">
                    <span className="font-bold w-12 flex-shrink-0 text-right text-gray-500 dark:text-gray-400">
                        #{score.position}
                    </span>
                    <span className={`truncate ${
                        score.isCurrentPlayer ? 'font-semibold text-blue-600 dark:text-blue-400' : 'text-gray-900 dark:text-white'
                    }`}>
                        {score.objectData.playerName}
                    </span>
                </div>
                <div className="flex items-center gap-2 overflow-hidden">
                    <div className={`relative ${isTransitioning ? 'pointer-events-none' : ''}`}>
                        <span 
                            className={`font-bold flex-shrink-0 ${
                                isValid ? 'text-gray-900 dark:text-white' : 'text-red-600 dark:text-red-400'
                            } inline-block transition-all duration-300 ${
                                showInvalidMessage && !isValid ? 'opacity-0 translate-y-2' : 'opacity-100 translate-y-0'
                            }`}
                        >
                            Level {score.objectData.score}
                        </span>
                        {!isValid && (
                            <span 
                                className={`font-bold flex-shrink-0 text-red-600 dark:text-red-400 absolute left-0 transition-all duration-300 ${
                                    showInvalidMessage ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2'
                                }`}
                            >
                                Invalid
                            </span>
                        )}
                    </div>
                </div>
            </div>
            {score.showEllipsisAfter && (
                <div className="h-4 flex items-center justify-center my-1">
                    <span className="text-gray-400 dark:text-gray-500">• • •</span>
                </div>
            )}
        </div>
    );
}
